<template>
  <div class="app-container bg-gray">
    <el-col :xs="24" :sm="24" :md="20" :lg="20" :xl="20" class="model-remark">注：本页根据昨日数据来计算，而非实时数据</el-col>
    <el-col :xs="24" :sm="24" :md="20" :lg="20" :xl="20">
      <el-card>
        <div class="model-data">
          <div class="item">
            <span>考试总数</span>
            <div><span class="num">{{ info['exam_end_number'] }}</span><span>次</span></div>
            <router-link to="/exam/examList">
              <el-button size="mini" type="text">详情</el-button>
            </router-link>
          </div>
          <div class="item">
            <span>试卷总数</span>
            <div><span class="num">{{ info['test_paper_number'] }}</span><span>张</span></div>
            <router-link to="/exam/examPaper">
              <el-button size="mini" type="text">详情</el-button>
            </router-link>
          </div>
          <div class="item">
            <span>新增考生</span>
            <div><span class="num">{{ info['new_member'] }}</span><span>人</span></div>
            <router-link to="/exam/examinee">
              <el-button size="mini" type="text">详情</el-button>
            </router-link>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :xs="24" :sm="24" :md="20" :lg="20" :xl="20" class="margin-top-20">
      <el-card>
        <div slot="header">各项指标</div>
        <el-col :span="8">
          <el-form label-width="140px">
            <el-form-item label="考试">{{ info['showChartData']['list']['exam_number'] }}</el-form-item>
            <el-form-item label="考试次数">{{ info['showChartData']['list']['exam_result_number'] }}</el-form-item>
            <el-form-item label="平均考试时间">{{ info['showChartData']['list']['average_time'] }}</el-form-item>
            <el-form-item label="及格率">{{ info['showChartData']['list']['pass_rate'] }}</el-form-item>
            <el-form-item
              v-for="item in info['showChartData']['data']"
              :key="item['name']"
              :label="item['name']">
              {{ item['value'] }}
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="16" align="center">
          <el-radio-group v-model="select" size="small">
            <el-radio-button :label="0">7日考试数据</el-radio-button>
            <el-radio-button :label="1">15日考试数据</el-radio-button>
            <el-radio-button :label="2">30日考试数据</el-radio-button>
          </el-radio-group>
          <pie-chart :chart-data="info.showChartData" class="margin-top-20"/>
        </el-col>
      </el-card>
    </el-col>
  </div>
</template>

<script>
import PieChart from './components/PieChart'
export default {
  components: {
    PieChart
  },
  data() {
    return {
      select: 0,
      // 数据
      info: {
        // 考试总数
        exam_end_number: 0,
        // 试卷数量
        test_paper_number: 0,
        // 新增考生
        new_member: 0,
        // 饼图数据
        showChartData: {
          'title': '7日订单指标',
          'data': [
            { value: 0, name: '及格' },
            { value: 0, name: '不及格' }
          ],
          'list': {
            exam_number: 0,
            exam_result_number: 0,
            average_time: 0,
            pass_rate: 0,
            pass_number: 0,
            fail: 0
          }
        },
        chartData: []
      }
    }
  },
  watch: {
    select: {
      handler(val) {
        this.info.showChartData = this.info.chartData[val]
      }
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      const url = 'exam/examCompute'
      this.$store.dispatch('GetConnect', { url }).then(res => {
        const temp = res.data || {};
        temp.showChartData = res.data.chartData[0];
        Object.assign(this.info, temp);
        // console.log(this.info);
      }).catch(e => {
        this.$message.error(e.msg || '系统错误');
      })
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../../styles/index.scss';

  .model-remark{
    height: 40px;
    line-height: 40px;
    font-size: 13px;
    background-color: white;
    margin-bottom: 20px;
    padding: 0 20px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    -webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  }
  .model-data {
    height: 108px;
    display: flex;
    flex-direction: row;
    align-items: center;

    .item {
      flex: 1;
      padding-left: 12%;
      border-right: 1px solid $gray;

      &:last-child {
        border-right: none;
      }

      span {
        font-size: 14px;
      }

      div {
        margin-top: 16px;

        .num {
          font-size: 26px;
          margin-right: 10px;
        }
      }
    }
  }
  .el-form-item{
    margin-bottom: 12px;
  }
</style>
